<route>
{
    meta: {
        enabled: false
    }
}
</route>
<template>
    <div>
        <page-header title="文章类别" />
        <page-main>
            <!-- 新增文章分类开始 -->
            <el-button type="primary" class="mb-20" size="large" @click="dialogFormVisible = true">新增文章分类</el-button>
            <!-- 新增文章分类结束 -->

            <!-- 表格开始 -->
            <el-table :data="tableData" border stripe style="width: 100%;">
                <el-table-column type="index" label="序号" width="60" />               
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="address" label="别名" />                
                <el-table-column label="操作" width="120">
                    <template #default>
                        <el-link                            
                            :underline="false"
                            type="primary"
                            class="mr-10"
                        >
                            编辑
                        </el-link>
                        <el-link
                            :underline="false"
                            type="primary"                            
                        >
                            删除
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格结束 -->

            <!-- 分页开始 -->
            <el-pagination
                class="hidden-md-and-down mt-20"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-pagination
                class="hidden-lg-and-up mt-20"
                layout="prev, pager, next"
                :total="50"
            />            
            <!-- 分页结束 -->
        </page-main>

        <!-- 新增文章分类对话框开始 -->
        <el-dialog v-model="dialogFormVisible" title="新增分类" width="30%">            
            <el-form :model="form" :label-position="top">
                <el-form-item label="分类名称:">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="分类别名:">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 新增文章分类对话框结束 -->
    </div>
</template>

<script setup name="articleMangerCategory">
const tableData = [
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
    },
    {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
    },
    {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
    }
]
const dialogFormVisible = ref(false)
const form = {
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
}
</script>
